<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
			<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
		<title>微商城</title>
		<link rel="stylesheet" href="__PUBLIC__/css/frozen.css" />
        <link rel="stylesheet" href="__PUBLIC__/css/iconfont.css" />
        <link rel="stylesheet" href="__PUBLIC__/css/myCss.css" />
		<script src="__PUBLIC__/lib/zepto.min.js"></script>
		<script src="__PUBLIC__/js/frozen.js"></script>
        <style>
            #fixedLayer {
                position:fixed;
                right: 8px;
                bottom: 55px;
                width:50px;
                height:50px;
                line-height:30px;
                background-color:#414a4f;
                text-align:center;
                border-radius: 5px;
                opacity:0.2;
                
                }
		</style>
    </head>
	

	<body>
		<header class="ui-header ui-header-stable  ui-border-b" >
            <i class="ui-icon-return" onclick="history.back()"></i>
			<h1>微商城</h1>
		</header>
        <footer class="ui-footer ui-footer-stable ui-border-t ui-footer-my">
            <ul class="ui-tiled">
                <li onclick="location.href='{:U('index','','',0,true)}'" >
                    <div class="iconfont icon-homefill"></div>
                </li>
                <li onclick="location.href='{:U('ProductList','','',0,true)}'" >
                    <div class="iconfont icon-shop"></div>
                </li>
                <li onclick="location.href='{:U('MyShop','','',0,true)}'">
                    <div class="iconfont icon-people"></div>
                </li>
            </ul>
	    </footer>
		<section class="ui-container">
			<div class="ui-slider" style="height:80px;">
				<ul class="ui-slider-content"  >
					<foreach name='ListAd' item='v'>
					<li ><span><img src="__PUBLIC__/images/Products/{$v.ProImg}" width="100%" height="100%"/></span></li>					
					</foreach>
				</ul>
			</div>
            <!--搜索商品栏目-->
             <div class="ui-searchbar-wrap" style="margin-top:2px;background-color:transparent;" >
                <div class="ui-searchbar ui-border-radius">
                    <i class="ui-icon-search"></i>
                    <div class="ui-searchbar-text">输入商品名</div>
                    <div class="ui-searchbar-input"><input value="" type="text" placeholder="搜索商品" autocapitalize="off"></div>
                    <i onclick="$('.ui-searchbar-input').find('input').val('');"  class="ui-icon-close"></i>
                </div>
                <div><button onclick="seachPro();" class="ui-btn" style="color:#777;">搜索</button></div>
            </div>
            <!--新品热销等商品分类栏-->
			<div class="ui-tab">
                <!--商品类别头-->
				<ul class="ui-tab-nav ui-border-b">
					<li class="current">新品上市</li>
					<li>热销商品</li>
					<li>特价商品</li>
				</ul>
                <!--商品列表区-->
				<ul class="ui-tab-content ">
					<li>
						<section id="list">
							<ul class="ui-list ui-list-active ui-border-tb">
								<foreach name='ListNew' item='v'>
                                    <if condition="$v.ProStau eq 1">
                                        <li class="ui-border-t ui-tag-freelimit" onclick=GetProDetail({$v.ProID})>
                                    <elseif condition="$v.ProStau eq 2"/>
                                        <li class="ui-border-t ui-tag-free" onclick=GetProDetail({$v.ProID})>
                                    <elseif condition="$v.ProStau eq 3"/>
                                        <li class="ui-border-t ui-tag-act" onclick=GetProDetail({$v.ProID})>
                                    <else/>
                                        <li class="ui-border-t" onclick=GetProDetail({$v.ProID})>
                                    </if>
                                        <div class="ui-list-img">
                                            <span><img src="__PUBLIC__/images/img/{$v.ProImg}" width="100px" height="72px"/></span>
                                        </div>
                                        <div class="ui-list-info" style="padding-top:10px;padding-bottom:0px;">
                                            <ul class="ui-row"  >
                                                <li class="ui-col ui-col-90" >
                                                    <h4 class="ui-nowrap" style="margin:0rem 0rem 0rem 0.03rem;">{$v.ProName}</h4>
                                                </li>
                                                <li class="ui-col ui-col-100"  >
                                                </li> 
                                                <li class="ui-col ui-col-67" style="padding-top:7px;" >
                                                    <h4 class="ui-nowrap" style="color:#777;font-size:10px;margin:0rem 0rem 0rem 0.03rem;width:80%;">产地：温州鹿城区</h4>
                                                </li> 
                                                <li class="ui-col ui-col-33" style="padding-top:7px;" >
                                                    <if condition="$v.ProNum lt 10">
                                                        <h4 class="ui-nowrap" style="float:right;color:#EE2C2C;font-size:12px;">库存{$v.ProNum}</h4>
                                                    <elseif condition="$v.ProNum gt 10"/>
                                                        <h4 class="ui-nowrap" style="float:right;color:#888;font-size:12px;">库存{$v.ProNum}</h4>
                                                    </if>
                                                    
                                                </li> 
                                                <li class="ui-col ui-col-75" style="padding-top:0px;">
                                                    <p id="pCount{$v.ProId}" class="ui-nowrap"  style="display:inline;color:#FF6347;font-weight:bold;">￥{$v.ProPrice}</p> 
                                                </li>
                                                <li class="ui-col ui-col-25" >
                                                    <p id="pPrice{$v.ProId}" class="ui-nowrap " style="float:right;font-size:13px;margin-top:3px;">售出<font color="#EE2C2C">{$v.ProSaleCount}</font>件</p>
                                                </li>
                                            </ul> 
                                        </div>
                                    </li>
								</foreach>
							</ul>
						</section>
					</li>
					<li>
						<section id="list">
							<ul class="ui-list ui-list-active ui-border-tb">
								<foreach name='ListHot' item='v'>
                                        <if condition="$v.ProStau eq 1">
                                            <li class="ui-border-t ui-tag-freelimit" onclick=GetProDetail({$v.ProID})>
                                        <elseif condition="$v.ProStau eq 2"/>
                                            <li class="ui-border-t ui-tag-free" onclick=GetProDetail({$v.ProID})>
                                        <elseif condition="$v.ProStau eq 3"/>
                                            <li class="ui-border-t ui-tag-act" onclick=GetProDetail({$v.ProID})>
                                        <else/>
                                            <li class="ui-border-t" onclick=GetProDetail({$v.ProID})>
                                        </if>
                                        <div class="ui-list-img">
                                            <span><img src="__PUBLIC__/images/img/{$v.ProImg}" width="100px" height="72px"/></span>
                                        </div>
                                        <div class="ui-list-info" style="padding-top:10px;padding-bottom:0px;">
                                            <ul class="ui-row"  >
                                                <li class="ui-col ui-col-90" >
                                                    <h4 class="ui-nowrap" style="margin:0rem 0rem 0rem 0.03rem;">{$v.ProName}</h4>
                                                </li>
                                                <li class="ui-col ui-col-100"  >
                                                </li> 
                                                <li class="ui-col ui-col-67" style="padding-top:7px;" >
                                                    <h4 class="ui-nowrap" style="color:#777;font-size:10px;margin:0rem 0rem 0rem 0.03rem;width:80%;">产地：温州鹿城区</h4>
                                                </li> 
                                                <li class="ui-col ui-col-33" style="padding-top:7px;" >
                                                    <if condition="$v.ProNum lt 10">
                                                        <h4 class="ui-nowrap" style="float:right;color:#EE2C2C;font-size:12px;">库存{$v.ProNum}</h4>
                                                    <elseif condition="$v.ProNum gt 10"/>
                                                        <h4 class="ui-nowrap" style="float:right;color:#888;font-size:12px;">库存{$v.ProNum}</h4>
                                                    </if>
                                                    
                                                </li> 
                                                <li class="ui-col ui-col-75" style="padding-top:0px;">
                                                    <p id="pCount{$v.ProId}" class="ui-nowrap"  style="display:inline;color:#FF6347;font-weight:bold;">￥{$v.ProPrice}</p> 
                                                </li>
                                                <li class="ui-col ui-col-25" >
                                                    <p id="pPrice{$v.ProId}" class="ui-nowrap " style="float:right;font-size:13px;margin-top:3px;">售出<font color="#EE2C2C">{$v.ProSaleCount}</font>件</p>
                                                </li>
                                            </ul> 
                                        </div>
                                    </li>
								</foreach>
							</ul>
						</section>
					</li>
					<li>
						<section id="list">
							<ul class="ui-list ui-list-active ui-border-tb">
								<foreach name='ListSal' item='v'>
									<if condition="$v.ProStau eq 1">
                                        <li class="ui-border-t ui-tag-freelimit" onclick=GetProDetail({$v.ProID})>
                                    <elseif condition="$v.ProStau eq 2"/>
                                        <li class="ui-border-t ui-tag-free" onclick=GetProDetail({$v.ProID})>
                                    <elseif condition="$v.ProStau eq 3"/>
                                        <li class="ui-border-t ui-tag-act" onclick=GetProDetail({$v.ProID})>
                                    <else/>
                                        <li class="ui-border-t" onclick=GetProDetail({$v.ProID})>
                                    </if>
                                    <div class="ui-list-img">
                                        <span><img src="__PUBLIC__/images/img/{$v.ProImg}" width="100px" height="72px"/></span>
                                    </div>
                                    <div class="ui-list-info" style="padding-top:10px;padding-bottom:0px;">
                                        <ul class="ui-row"  >
                                            <li class="ui-col ui-col-90" >
                                                <h4 class="ui-nowrap" style="margin:0rem 0rem 0rem 0.03rem;">{$v.ProName}</h4>
                                            </li>
                                            <li class="ui-col ui-col-100"  >
                                            </li> 
                                            <li class="ui-col ui-col-67" style="padding-top:7px;" >
                                                <h4 class="ui-nowrap" style="color:#777;font-size:10px;margin:0rem 0rem 0rem 0.03rem;width:80%;">产地：温州鹿城区</h4>
                                            </li> 
                                            <li class="ui-col ui-col-33" style="padding-top:7px;" >
                                                <if condition="$v.ProNum lt 10">
                                                    <h4 class="ui-nowrap" style="float:right;color:#EE2C2C;font-size:12px;">库存{$v.ProNum}</h4>
                                                <elseif condition="$v.ProNum gt 10"/>
                                                    <h4 class="ui-nowrap" style="float:right;color:#888;font-size:12px;">库存{$v.ProNum}</h4>
                                                </if>
                                                
                                            </li> 
                                            <li class="ui-col ui-col-75" style="padding-top:0px;">
                                                <p id="pCount{$v.ProId}" class="ui-nowrap"  style="display:inline;color:#FF6347;font-weight:bold;">￥{$v.ProPrice}</p> 
                                            </li>
                                            <li class="ui-col ui-col-25" >
                                                <p id="pPrice{$v.ProId}" class="ui-nowrap " style="float:right;font-size:13px;margin-top:3px;">售出<font color="#EE2C2C">{$v.ProSaleCount}</font>件</p>
                                            </li>
                                        </ul> 
                                    </div>
                                    </li>
								</foreach>
							</ul>
						</section>
					</li>
				</ul>
			</div>
            <!--右下角购物车-->
            <div id='fixedLayer' onclick="location.href='{:U('Cart/loadCart','','',0,true)}'">
                 <i  class="ui-icon-cart" style="font-size:50px;color:#ffffff;" ></i>
                <!--
                <div class="ui-reddot-s">
                    <i  class="ui-icon-cart" style="font-size:50px;" onclick="alert('购物车');"></i>
                </div>
                -->
            </div>
		</section>
	</body>
	<script type="text/javascript">
    
        fixedLayer.onmouseover = function(){
            fixedLayer.style.opacity=0.5;
        };
        fixedLayer.onmouseout  = function(){
            fixedLayer.style.opacity=0.2;
        };
        
        $('.ui-searchbar').on('click',function(){
            $('.ui-searchbar-wrap').addClass('focus');
            $('.ui-searchbar-input input').focus();
        });
        
		function GetProDetail(id){
			
			var Url='{:U('ProDetail','','',0,true)}';
			Url=Url+'/ProID/'+id;
			location.href=Url;
		}
		(function() {
			var slider = new fz.Scroll('.ui-slider', {
				role: 'slider',
				indicator: true,
				autoplay: true,
				interval: 3000
			});
			slider.on('beforeScrollStart', function(fromIndex, toIndex) {
				//console.log(fromIndex, toIndex)
			});
			slider.on('scrollEnd', function(cruPage) {
				//console.log(cruPage)
			});
		})();
		(function() {
			var tab = new fz.Scroll('.ui-tab', {
				role: 'tab',
				autoplay: false,
				interval: 1000
			});
			/* 滑动开始前 */
			tab.on('beforeScrollStart', function(fromIndex, toIndex) {
				//console.log(fromIndex, toIndex); // from 为当前页，to 为下一页
			})
		})();		
	</script>

</html>